//@import '../common/css/profile.scss';
$dark_gray: #889aa4;
$cursor: #fff;
$bg: #2d3a4b;

.login {
  width: 100%;
  height: 100vh;
  position: relative;
  background: url('../../assets/images/login-bg.png') no-repeat center center;
  //background-color: $bg;
  background-size: cover;

  .el-form-item {

    &.active {
      .el-form-item__content {
        border: 1px solid #409eff;
      }
    }

    .el-form-item__content {
      width: 100%;
      height: 47px;
      box-sizing: border-box;
      border: 1px solid #dddddd;
      border-radius: 4px;
      position: relative;

      &:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: ' ';
        clear: both;
        height: 0;
      }

      ::v-deep {
        .el-input {
          display: inline-block;
        }
      }
    }

    .el-form-item__error {
      font-size: 14px;
      padding: 5px 0;
    }

    //background: rgba(0, 0, 0, 0.1);
    .svg-container {
      float: left;
      width: 9%;
      display: inline-block;
      padding: 0px 10px;
      height: 100%;
      box-sizing: border-box;
      vertical-align: middle;

      &.active {
        color: #409eff;
      }

      .tag {
        height: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
      }
    }

    .el-input {
      float: left;
      display: inline-block;
      width: 91%;
      height: 100%;
      font-size: 14px;
      color: #3f4457;
      vertical-align: middle;

      input {
        background: transparent;
        border: 0px;
        -webkit-appearance: none;
        border-radius: 0px;
        padding: 0 0;
      }

      //-webkit-box-shadow: 0 0 0px 1000px white inset;
      input::-webkit-input-placeholder,
      textarea::-webkit-input-placeholder {
        /* WebKit browsers */
        color: #bababa;
      }

      input:-moz-placeholder,
      textarea:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #bababa;
      }

      input::-moz-placeholder,
      textarea::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #bababa;
      }

      input:-ms-input-placeholder,
      textarea:-ms-input-placeholder {
        /* Internet Explorer 10+ */
        color: #bababa;
      }
    }

    .svg-eye {
      cursor: pointer;
      position: absolute;
      right: 30px;
      top: 50%;
      transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      width: 11.67%;
      height: 18px;
      line-height: 18px;
      padding: 0 10px;
      box-sizing: border-box;

      .tag {
        height: 100%;
        background: none;
      }
    }

    .codeImg {
      position: absolute;
      right: -130px;
      top: 50%;
      width: 90px;
      height: 30px;
      transform: translateY(-50%);
      cursor: pointer;
      border: 1px solid #fff;
      box-sizing: border-box;

      // background: red;
      img {
        width: 100%;
        height: 100%;
        vertical-align: baseline;
      }
    }
  }

  .loginDialog {
    width: 400px;
    padding: 45px;
    border-radius: 10px;
    // border: 1px solid #e5ebfd;
    // box-shadow: 0 0 10px #e5ebfd;
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: #ffffff;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);

    h1 {
      font-weight: bold;
      font-size: 40px;
      text-align: center;
    }

    .title-container {
      position: relative;
      margin-bottom: 29px;

      .logo-svg {
        display: inline-block;
        width: 105px;
        height: 33px;
        background: url("../../assets/images/login-logo.png") no-repeat;
        background-size: cover;
      }

      .title {
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        font-size: 18px;
        line-height: 20px;
        text-align: center;
        font-weight: bold;
        color: #6d727e;
      }
    }

    .loginBox {
      .el-input {
        display: inline-block;
        height: 47px;
        line-height: 47px;
        width: 85%;

        input {
          background: transparent;
          border: none;
          -webkit-appearance: none;
          border-radius: 0px;
          color: #000;
          font-size: 14px;
          height: 47px;
          padding: 0 15px;
          caret-color: #000;

          &:-webkit-autofill {
            box-shadow: 0 0 0px 1000px $bg inset !important;
            -webkit-text-fill-color: $cursor !important;
          }
        }

        input:-ms-input-placeholder {
          color: #aab2bd;
        }
      }

    }

    .errorTips {
      height: 20px;
      font-size: 12px;
      color: #f65860;
    }

    .choosed {
      margin: 20px 0;
      height: 20px;
      font-size: 12px;
    }

    .loginBtn {
      display: block;
      width: 100%;
      height: 52px;
      text-align: center;
      color: #ffffff;
      border-radius: 4px;
      font-size: 18px;
      background-color: #409eff;
      // opacity: 0.5;
      margin: 0 auto;

      &.active {
        opacity: 1;
      }
    }
  }

  .groupScroll{
    height: calc(100vh - 300px);
    padding-bottom: 17px;
    .orgInput{
      width: 350px;
      padding-bottom: 16px;
    }
  }

  ::v-deep{
    .el-scrollbar__wrap {
      overflow-y: scroll;
      overflow-x: hidden;
      transform: translate3d(0,0,0);
    }
  }

  .thirdparty-button {
    margin: 10px auto;
  }

  @media only screen and (max-width: 470px) {
    .thirdparty-button {
      display: none;
    }
  }

  // // 兼容小屏幕
  // @media only screen and (max-width: 1366px) {
  //   .el-input input {
  //     height: 40px;
  //     line-height: 40px;
  //     font-size: 14px;
  //   }

  //   .el-form-item .el-form-item__content {
  //     height: 40px;
  //     line-height: 40px;
  //   }
  // }
}
